<!--
 * @Author: tian_biao
 * @Date: 2021-08-19 10:31:36
 * @LastEditTime: 2021-08-19 14:46:40
 * @Description: 选择变电站
-->

<template>
    <div id="selectPeoplePage">
        <!-- 头部导航 -->
        <Theader :title="title">
            <template slot="header_arrow">
                <van-icon @back="back" size="22" name="arrow-left" @click="back" />
            </template>
        </Theader>
        <!-- 搜索区域-->
        <van-search style="margin-top: 46px;" v-model="subName" clearable @click="focus" background="#fff"
            placeholder="搜索变电站">
        </van-search>
        <div class="mySub">
            <div class="box">
                <div>丰泉变电站</div>
                <div class="locationBox">
                    <img src="../../images/location.png" alt="" srcset="">
                    <div>我的位置</div>
                </div>
            </div>
        </div>
        <div class="other">其他变电站</div>
        <div class="subList">
            <div class="subItem mb1rem" v-for="(item,index) in subList" :key="index" @click="selectSub(item)">
                <div class="subItem subItemson">
                    <div class="subName">{{item.subName}}</div>
                    <div class="level ml05rem colorccc fs14px">
                        电压等级：{{item.level}}
                        <!-- <div class="levelTitle">电压等级：</div> -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { Dialog } from 'vant';
    const PinyinEngine = require('pinyin-engine');
    import Theader from "./header"
    export default {
        name: "SelectSubstation",
        components: {
            Theader
        },

        data() {
            return {
                title: "选择变电站",
                subName: '',
                subList:[
                    {
                        subName:"江南变电站",
                        level:"1000kv",
                    },
                    {
                        subName:"云交变电站",
                        level:"1000kv",
                    },
                    {
                        subName:"丰泉变电站",
                        level:"1000kv",
                    },
                    {
                        subName:"丰泉变电站",
                        level:"1000kv",
                    },
                    {
                        subName:"丰泉变电站",
                        level:"1000kv",
                    },
                    {
                        subName:"丰泉变电站",
                        level:"1000kv",
                    },
                    {
                        subName:"丰泉变电站",
                        level:"1000kv",
                    },
                    {
                        subName:"丰泉变电站",
                        level:"1000kv",
                    },
                    {
                        subName:"丰泉变电站",
                        level:"1000kv",
                    },
                    {
                        subName:"丰泉变电站",
                        level:"1000kv",
                    },
                    {
                        subName:"丰泉变电站",
                        level:"1000kv",
                    },
                    {
                        subName:"丰泉变电站",
                        level:"1000kv",
                    },
                    {
                        subName:"丰泉变电站",
                        level:"1000kv",
                    },
                    {
                        subName:"丰泉变电站",
                        level:"1000kv",
                    },
                    {
                        subName:"丰泉变电站",
                        level:"1000kv",
                    },
                    {
                        subName:"丰泉变电站",
                        level:"1000kv",
                    },
                    {
                        subName:"丰泉变电站",
                        level:"1000kv",
                    },
                    {
                        subName:"丰泉变电站",
                        level:"1000kv",
                    },
                    {
                        subName:"丰泉变电站",
                        level:"1000kv",
                    },
                    {
                        subName:"丰泉变电站",
                        level:"1000kv",
                    },
                    {
                        subName:"丰泉变电站",
                        level:"1000kv",
                    },
                ],
            };
        },
        computed: {
        },
        methods: {
            focus() {

            },
            /**
             * @description: 返回
             */
            back() {
                this.$emit("comfirmSub")
            },
            /**
             * @description: 确定
             */
             selectSub(item) {
                this.$emit("comfirmSub",item)
            },
        },
        mounted() {
            //this.getPeopleList()
        }
    };
</script>

<style scoped>
    #selectPeoplePage {
        width: 100%;
        height: 100%;
        font-size: 16px;
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0;
        background: #f5f6fa;
        text-align: left;
        z-index: 9999;
    }

    .mySub {
        width: 100%;
        height: 3rem;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
    }

    .box {
        width: 95%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .locationBox {
        padding-left: 1rem;
        width: 5.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #0EB295;
    }

    .locationBox>img {
        width: 1rem;
        height: 1rem;
    }

    .other {
        width: 95%;
        margin: 0 auto;
        margin-top: 1rem;
    }

    .subList {
        width: 100%;
        height: 77vh;
        margin-top: 1rem;
        overflow-y: auto;
    }

    .subItem {
        width: 95%;
        height: 3rem;
        margin: 0 auto;
        background-color: #fff;
    }
    .subItemson{
        display: flex;
        align-items: center;
    }
    .mb1rem{
        margin-bottom: 1rem;
    }
    .ml05rem{
        margin-left: 0.5rem;
    }
    .colorccc{
        color: #ccc;
    }
    .fs14px{
        font-size: 14px;
    }
</style>